<style type="text/css">
    .album_list .nav-activity-title h3{color: #e33e3e;font: 700 20px/1.35 Raleway, Helvetica Neue, Helvetica, Arial, sans-serif;border-bottom: 2px solid#e33e3e;}
    .album_list  .products-grid li .price-box {position:relative;height: 54px;}
    .album_list  .products-grid li .price-box p.sold-price {display:block;}
    .album_list  .products-grid li .price-box p.special-price {position:absolute;bottom:0px;left:0px;width:100%;}
    .album_list  .products-grid li .price-box span.regular-price {position:absolute;bottom:0px;left:0px;width:100%;}
</style>

<?php

//配置项
$w = '190';
$h = '190';
$collection = $this->MobileCollection();
$_collectionSize = $collection->count();

$altImgGrid = Mage::helper('themeframework/settings')->getProductsGrid_AltImg();

$code      = $this->getRequest()->getParam('code');//当前聚合页字段
$homeUrl   = $this->getUrl('')."album/polymerization/mobile/";//控制器路径
$loaderimg = $this->getUrl().'skin/frontend/em0131/default/images/opc-ajax-loader.gif';
?>

<div class="album_list">
    <div  class="nav-activity">
        <div class="nav-activity-title">
            <h3>
                <span><?php echo $this->getMainTitle();?></span>
            </h3>
        </div>
        <div class="album-list-item-content">
            <div class="category-products">
                <?php if ($_collectionSize > 0): ?>
                    <div id="em-grid-mobile">
                        <ul class="emcatalog-grid-mode products-grid emcatalog-disable-hover-below-mobile">
                            <?php $i=0; foreach ($collection as $_product): ?>
                                <?php
                                $productImg    = $this->getMediaUrl('catalog/product/placeholder/default/placeholder-image-rumall.jpg');
                                $productName   = $_product->getName();
                                $productId     = $_product->getId();
                                $shortdes      = Mage::helper('core')->stripTags($_product->getShortDescription());
                                if(mb_strlen($shortdes, 'utf-8')>100) {
                                    $shortdes = rtrim(mb_substr($shortdes, 0, 100, 'utf-8')) . '...';
                                }
                                ?>
                                <li class="item<?php echo $i == 0 ?' first':''; ?><?php echo $i+1 == $_collectionSize ?' last':''; ?>">
                                    <div class="product-item">
                                        <div class="product-shop-top">
                                            <!-- Show Thumbnail -->
                                            <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" class="product-image">
                                                <?php if (Mage::helper('themeframework/settings')->getProductsGrid_ShowLabel()):?>
                                                    <!--show label product - label extension is required-->
                                                    <?php Mage::helper('productlabels')->display($_product);?>
                                                <?php endif;?>

                                                <?php if($altImgGrid):?>
                                                    <img class="em-img-lazy img-responsive em-alt-hover" src="<?php echo $this->getSkinUrl('images/loading.gif') ?>" data-original="<?php echo $this->helper('catalog/image')->init($_product, $altImgGrid)->resize($w, $h); ?>" width="<?php echo $w ?>" height="<?php echo $h ?>" alt="<?php echo $this->stripTags($this->getImageLabel($_product, $altImgGrid), null, true) ?>" />
                                                <?php endif;?>
                                                <img id="product-collection-image-<?php echo $_product->getId(); ?>" class="em-img-lazy img-responsive <?php if ($altImgGrid): ?>em-alt-org<?php endif ?>" src="<?php echo $this->getSkinUrl('images/loading.gif') ?>" data-original="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize($w, $h); ?>" width="<?php echo $w ?>" height="<?php echo $h ?>" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" />
                                                <span class="bkg-hover"></span>
                                            </a>

                                            <!-- 
                                            <div class="bottom">
                                                <?php //if($_product->isSaleable()): ?>
                                                    show button add to cart
                                                    <button type="button" title="<?php //echo Mage::helper('core')->quoteEscape($this->__('Add to Cart')) ?>" class="button btn-cart" onclick="setLocation('<?php //echo $this->getAddToCartUrl($_product) ?>')"><span><span><?php //echo $this->__('Add to Cart') ?></span></span></button>
                                                <?php //else: ?>
                                                    <p class="availability out-of-stock"><span><?php //echo $this->__('Out of stock') ?></span></p>
                                                <?php //endif; ?>
                                            
                                                show button add to compare-wishlist
                                                <ul class="add-to-links">
                                                    <?php //if ($this->helper('wishlist')->isAllow()) : ?>
                                                        <li><a href="<?php //echo $this->helper('wishlist')->getAddUrl($_product) ?>" class="link-wishlist" title="<?php //echo $this->__('Add to Wishlist') ?>"><?php //echo $this->__('Add to Wishlist') ?></a></li>
                                                    <?php //endif; ?>
                                                    <?php //if($_compareUrl=$this->getAddToCompareUrl($_product)): ?>
                                                        <li><a href="<?php //echo $_compareUrl ?>" class="link-compare" title="<?php //echo $this->__('Add to Compare') ?>"><?php //echo $this->__('Add to Compare') ?></a></li>
                                                    <?php //endif; ?>
                                                </ul>
                                            </div> 
                                            -->
                                        </div>

                                        <div class="product-shop">
                                            <div class="f-fix">
                                                <!--product name-->
                                                <h2 class="product-name text-center"><a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $productName ?>"><?php echo $productName ?></a></h2>
                                                <!--show reviews-->
                                                <div class="<?php if(Mage::helper('themeframework/settings')->getProductsGrid_ShowReviews() == 2):?>em-element-display-hover<?php endif;?> text-center">
                                                    <?php echo $this->getReviewsSummaryHtml($_product, 'short') ?>
                                                </div>
                                                <!--product price-->
                                                <div class="text-center  <?php if(Mage::helper('themeframework/settings')->getProductsGrid_ShowPrice() == 2): ?>em-element-display-hover<?php endif;?>">
                                                    <?php echo $this->getPriceHtml($_product, true) ?>
                                                </div>
                                                <!--product description-->
                                                <!-- <div class="desc std text-center em-element-display-hover"><?php //echo $shortdes ?></div> -->
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <?php $i++;?>
                                <?php if($i >= $_collectionSize) break;?>
                            <?php endforeach ?>
                        </ul>
                    </div>
                <?php endif; ?>
            </div>
            <div class="sf-click-em fa fa-angle-double-down" style="border: 1px solid #e33e3e;border-radius: 5px;padding: 5px;text-align: center;color: #fff;font-weight: bold;display: block;background: #e33e3e;font-size: 28px;"></div>
        </div>
    </div>
</div>

<?php

 // set column count    
$_pageLayout = substr((str_replace(array('page/','.phtml'),'',Mage::app()->getLayout()->getBlock('root')->getTemplate())),0,1);
if(Mage::helper('themeframework/settings')->getGeneral_DisableResponsive(1)!=0){
    switch($_pageLayout){
        case 3:
            $_columnCountDesktop = Mage::helper('themeframework/settings')->getProductsGrid_Threecolumns(3);
            $_columnCountDesktopSmall = Mage::helper('themeframework/settings')->getProductsGrid_DesktopSmallThreecolumns(3);
            $_columnCountTablet = Mage::helper('themeframework/settings')->getProductsGrid_TabletThreecolumns(3);
            break;
        case 1:
            $_columnCountDesktop = Mage::helper('themeframework/settings')->getProductsGrid_Onecolumn(5);
            $_columnCountDesktopSmall = Mage::helper('themeframework/settings')->getProductsGrid_DesktopSmallOnecolumn(5);
            $_columnCountTablet = Mage::helper('themeframework/settings')->getProductsGrid_TabletOnecolumn(5);
            break;
        default:
            $_columnCountDesktop = Mage::helper('themeframework/settings')->getProductsGrid_Twocolumns(4);
            $_columnCountDesktopSmall = Mage::helper('themeframework/settings')->getProductsGrid_DesktopSmallTwocolumns(4);
            $_columnCountTablet = Mage::helper('themeframework/settings')->getProductsGrid_TabletTwocolumns(4);
            break;
    }
    $_columnCountMobile = Mage::helper('themeframework/settings')->getProductsGrid_ItemsMobile(3);
}else{
    switch($_pageLayout){
        case 3:
            $_columnCountDesktop = Mage::helper('themeframework/settings')->getProductsGrid_Threecolumns(3);
            break;
        case 1:
            $_columnCountDesktop = Mage::helper('themeframework/settings')->getProductsGrid_Onecolumn(5);
            break;
        default:
            $_columnCountDesktop = Mage::helper('themeframework/settings')->getProductsGrid_Twocolumns(4);
            break;
    }
}

?>

<script type="text/javascript">
//<![CDATA[
    (function($){
        //点击加载更多。。。
         $('.sf-click-em').click(function(){
            $('.sf-click-em').css("display","none");
            $html = '<ul class="emcatalog-grid-mode products-grid emcatalog-disable-hover-below-mobile"><li style="text-align:center;"><img src="<?php echo $loaderimg ?>" alt="Click to load more..."/></li></ul>';
            var ul_item = $("#em-grid-mobile").children().length;
            var homeUrl = "<?php echo $homeUrl ?>";
            var code    = "<?php echo $code ?>";
            $("#em-grid-mobile").append($html);
             $.post(homeUrl ,{
                    "ul_item":ul_item+1,
                    "code":code
                },function(returns){
                    var documen = $("#em-grid-mobile").children().last();
                    if(returns.info == "success"){
                        documen.html(returns.product);
                        var len = documen.children().length;
                        var itemHig = $("ul li.item >div").height();
                        if(len == 16){
                            $('.sf-click-em').css("display","block");
                            $("ul li.item").height(itemHig);
                        }else {
                            documen.append("<div class='row'>------------</div>");
                             $('.sf-click-em').remove();
                        }
                    }else{
                        documen.html("<div class='row'>------------</div>");
                        $('.sf-click-em').remove();
                    }
                },"json")

        });


        //调整浏览器窗口时追加对象高度
        $(window).resize(function(){
            var itemHig = $("ul li.item >div").height();
            $("ul li.item").height(itemHig);
        });
        


        if (typeof EM == 'undefined') EM = {};
        if (typeof EM.SETTING == 'undefined') EM.SETTING = {};
        function getWindowWidth() {
            var w = window;
            var d = document;
            var e = d.documentElement;
            var g = d.getElementsByTagName('body')[0];
            var x = w.innerWidth||e.clientWidth||g.clientWidth;
            return x;
        };

        function setColumnCountGridMode(){
            var wWin = getWindowWidth();
            if(EM.SETTING.DISABLE_RESPONSIVE==1){
                var sDesktop = 'emcatalog-desktop-';
                var sDesktopSmall = 'emcatalog-desktop-small-';
                var sTablet = 'emcatalog-tablet-';
                var sMobile = 'emcatalog-mobile-';
                var sGrid = $('#em-grid-mobile');
                if(wWin>1200){
                    sGrid.removeClass().addClass(sDesktop+'<?php echo $_columnCountDesktop ?>');
                }else{
                    if(wWin<=1200 && wWin>768){
                        sGrid.removeClass().addClass(sDesktopSmall+'<?php echo $_columnCountDesktopSmall ?>');
                    }else{
                        if(wWin<=768 && wWin>480){
                            sGrid.removeClass().addClass(sTablet+'<?php echo $_columnCountTablet ?>');
                        }else{
                            sGrid.removeClass().addClass(sMobile+'<?php echo $_columnCountMobile ?>');
                        }
                    }
                }
            }else{
                var sDesktop = 'emcatalog-desktop-';
                var sGrid = $('#em-grid-mobile');
                sGrid.removeClass().addClass(sDesktop+'<?php echo $_columnCountDesktop ?>');
            }
        };

        //Ready Function
        $(document).ready(function() {
            setColumnCountGridMode();
        });
        $(window).resize($.throttle(300,function(){
            setColumnCountGridMode();
        }));

    })(jQuery);
//]]
</script>

<script type="text/javascript">
    /* lie 图片懒加载 */
    (function($){
        $(function() {
            $("img.lazy").lazyload({
                event : "sporty",
                effect: "fadeIn"
            });
        });

        $(window).bind("load", function() {
            var timeout = setTimeout(function() {
                $("img.lazy").trigger("sporty")
            }, 5000);
        });
    })(jQuery);
    /* lie 图片懒加载 */
</script>